/* eslint-disable react/jsx-no-duplicate-props */
import { useModel } from '@umijs/max';
import { theme } from 'antd';
import './index.less';

function FilterSwitchs({ prefix, unChecked, checked, setkey = 'waringfilter' }) {
  const {
    token: { colorPrimary },
  } = theme.useToken();
  const {
    initialState: { currentUser },
    setInitialState,
  } = useModel('@@initialState');

  return (
    <div className="checkbox-wrapper-35" style={{ '--color': colorPrimary }}>
      <input
        value="private"
        name={setkey}
        id={setkey}
        type="checkbox"
        className="switch"
        checked={currentUser?.[setkey] === true}
        onChange={(e) => {
          setInitialState((s) => ({
            ...s,
            currentUser: {
              ...s.currentUser,
              [setkey]: e.target.checked,
            },
          }));
          localStorage.setItem(setkey, JSON.stringify(e.target.checked));
        }}
      />
      <label htmlFor={setkey}>
        <span className="switch-x-text">{prefix ?? ''}</span>
        <span className="switch-x-toggletext">
          <span className="switch-x-unchecked">
            <span className="switch-x-hiddenlabel">Unchecked: </span>
            {unChecked ?? '关'}
          </span>
          <span className="switch-x-checked">
            <span className="switch-x-hiddenlabel">Checked: </span>
            {checked ?? '开'}
          </span>
        </span>
      </label>
    </div>
  );
}

export default FilterSwitchs;
